@navHeight: 78px;
@bgColor: #4A4A4A;
@activeColor: #D2CBB8;

/* common */
.dg-nav-active {// 激活颜色
  color: @activeColor !important;
}


/*
  Topbar
*/
.dg-header-style { background-color: @bgColor; }
.dg-header-pos {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
}

/*
  Slot
*/
.dg-slot-pos { position: relative; }

/*
  SlotIcon
*/
.dg-icon-pos + .dg-icon-pos {
  margin-left: 2px;
}

.dg-icon-style {
  border: 1px solid #A3A3A3;
  border-radius: 5px;
  padding: 5px;
  cursor: pointer;
  &:hover {
    color: @activeColor;
    border-color: @activeColor;
  }
}

/*
 Toggle
*/
.dg-toggle-style {
  background-color: transparent;
  cursor: pointer;
  color: white;
  border: none;
  &:hover, &:active, &:focus { background-color: transparent; color: white; }
}

.dg-toggle-pos {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/*
 Nav
*/
.pos {
  margin: 0; padding: 0;
  list-style: none;
}

/*
 =====================================================================
 媒体查询样式
 =====================================================================
*/

/* -1180,1181- ========================== */
@max1180: ~"screen and (max-width: 1180px)";
@min1181: ~"screen and (min-width: 1181px)";



/* -870,871- ============================ */
@max870: ~"screen and (max-width: 870px)";
@min871: ~"screen and (min-width: 871px)";
@media @max870 {
  /*
   NavItem
  */
  .dg-nav-item:first-child { span { padding: 0 10px; } }
  .dg-nav-item + .dg-nav-item { span { padding: 0 10px; } }
}
@media @min871 {
  /*
   Nav
  */
  .pos { width: 558px; }

  /*
   NavItem
  */
  .dg-nav-item:first-child { span { padding: 0 25px; } }
  .dg-nav-item + .dg-nav-item { span { padding: 0 25px; } }
}

/* mobile start -740,741- =================== */
@max740: ~"screen and (max-width: 740px)";
@min741: ~"screen and (min-width: 741px)";
@media @max740 {
  /*
   Collapse
  */
  .menus-style {
    width: 100%;
    background-color: @bgColor;
  }

  /*
   NavItem
  */
  .dg-nav-item {
    border-radius: 5px;
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    transition: all .25s;
    margin: 5px 0;
    &:hover {
      .dg-nav-active;
      box-shadow: 3px 3px 18px -3px #000000 inset;
    }
  }
}

@media @min741 {

  /*
    Slot
  */
  .dg-slot-pos { right: 7px; }


  /*
   Nav
  */
  .pos {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /*
   NavItem
  */
  .dg-nav-item + .dg-nav-item {
    span {
      border-left: 1px solid #A3A3A3;
      border-radius: 1px;
    }
  }
  .dg-nav-item {
    float: left;
    cursor: pointer;
    font-size: 1.55rem;
    &:hover { .dg-nav-active; }
  }
}

// iphone5=========================
@max320: ~"screen and (max-width: 320px)";
@min321: ~"screen and (min-width: 321px)";
@media @max320 {
  /*
   DgHeader
  */
  .dg-nav-img-lpos {
    height: @navHeight - 15;
    img { height: 70%; }
  }


  /*
  Topbar
  */
  .dg-header-style {
    line-height: @navHeight - 15;
    height: @navHeight - 15;
  }
}

@media @min321 {
  /*
   DgHeader
  */
  .dg-nav-img-lpos {
    height: @navHeight;
    img { height: 75%; }
  }

  .dg-nav-img-rpos {
    .dg-nav-img-lpos;
    margin-right: 10px;
  }


  /*
   Topbar
  */
  .dg-header-style {
    line-height: @navHeight;
    height: @navHeight;
  }
}

// iphone6=======================
@max375: ~"screen and (max-width: 375px)";
@min376: ~"screen and (min-width: 376px)";
@media @max375 {
  /*
   Slot
  */
  .dg-slot-pos { right: 26px; }

  /*
   Toggle
  */
  .dg-toggle-pos { right: -15px; }
}

// ================================
@min376-max740: ~"screen and (min-width: 376px) and (max-width: 740px)";
@media @min376-max740 {
  /*
   Slot
  */
  .dg-slot-pos { right: 45px; }

  /*
   Toggle
  */
  .dg-toggle-pos { right: 0px; }
}

// ================================
@min741-max870: ~"screen and (min-width: 741px) and (max-width: 870px)";
@media @min741-max870 {
  /*
   Nav
  */
  .pos { width: 408px; left: 55%; }
}